<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="900px"
                :close-on-click-modal="false"
                @close="close"
        >
<!--            <el-form ref="form" :model="form" label-width="120px">-->
<!--                <el-scrollbar>-->
<!--                    <div class="recordBox pad_lr_20">-->
<!--                        兑换码：{{form.code}}-->
<!--                        <div v-for="(item,i) in files" class="t_l fon_16 lh30">{{item}}</div>-->
<!--                    </div>-->
<!--                </el-scrollbar>-->
<!--            </el-form>-->
            <el-table
                    :data="list"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="code"
                        label="兑换码名称"
                >
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态"
                >
                    <template slot-scope="scope">
                        <div v-show="scope.row.state=='1'" class="color-red">已兑换</div>
                        <div v-show="scope.row.state=='2'" class="color_9">未兑换</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="changeAt"
                        label="兑换时间"
                >
                </el-table-column>
                <el-table-column
                    prop="changeAt"
                    label="兑换人信息"
                >
                  <template slot-scope="scope">
                    <div class="flex flex-y-top" v-if="scope.row.userName">
                      <div class="">
                        <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                      </div>
                      <div class="mar_l10">
                        <div class="">
                          <div class="">{{scope.row.userName}}</div>
                          <el-tag size="mini" type="info" class="">（Id:{{scope.row.userId}}）</el-tag>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="close">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {codeList} from "@/api/plug";
    export default {
        name: "labelSave",
        created() {
        },
        data() {
            return {
                form: {
                    id:'',
                    name: "",
                    sort: "1",
                    color: "#ed4014",
                },
                list:[],
                page: {
                    total: 0,
                    size: 20,
                    currentPage: 1,
                },
                title: "",
                dialogFormVisible: false,
            }
        },
        components: {
        },
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = "添加";
                } else {
                    this.title = "兑换码列表";
                    this.form = Object.assign({}, row);
                }
                this.codeList()
                this.dialogFormVisible = true;
            },
            close() {
                // this.$refs["form"].resetFields();
                // this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
           async codeList(){
                const { data,count} = await codeList({id:this.form.id,page:this.page.currentPage});
               this.list = data
               this.page.total = count;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.codeList();
            },
            // save() {
            //     this.$refs["form"].validate(async (valid) => {
            //         if (valid) {
            //             const { msg } = await labelSave(this.form);
            //             this.$baseMessage(msg, "success");
            //             this.$emit("fetchData");
            //             this.close();
            //         } else {
            //             return false;
            //         }
            //     });
            // },
        }
    };
</script>
<style lang="scss">
    .recordBox{max-height: 500px;}
</style>
